<template>
  <van-grid :column-num="2">
    <van-grid-item
      v-for="(item, index) in items.filter(it => it.name != null)"
      :key="index"
      @click="onItemClick(item)"
    >
      <van-image
        fit="contain"
        height="100"
        :src="'data:image;base64,' + item.images[0]"
      />
      <span class="items-title">{{ item.name }}</span
      ><span class="items-cur-price">￥{{ item.current_price }} </span>
    </van-grid-item>
  </van-grid>
</template>

<script>
import { Grid, GridItem, Icon, Image } from "vant"
export default {
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Icon.name]: Icon,
    [Image.name]: Image
  },
  props: ["items"],
  methods: {
    onItemClick(item) {
      this.$router.push({ name: "item", params: { item_id: item.item_id } })
    }
  }
}
</script>

<style scoped>
.items-title {
  font-size: 1em;
  padding: 5px 0;
}
.items-cur-price {
  color: #f44;
  font-size: 0.9em;
}
</style>
